@import "_config.scss";
@import "_mixins.scss";
@import "reset.scss";

.three-dimansion-slider {
	perspective: 500px;//透视距离
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;

	& > * {
		flex: 0 0 auto;
	}

	.three-dimansion-slides {
		width: 40%;
		transform-style: preserve-3d;
		transition: transform 0.5s;

		.three-dimansion-slider-list {
			width: 100%;
			height: 100%;
			
			a{
				display:block;
				width: 100%;
    			height: 100%;
				@extend %clearfix;
			}

			.three-dimansion-slider-item{
				width: 100%;
				//height: 100%;
				padding-bottom:percentage(832px / 1920px);
				margin: 0 auto;

				.three-dimansion-item-content{
					width: 100%;
					height: 100%;

					h3.title{
						font-weight: bold;
						text-align:left;
						font-size: 48px;
						line-height: 58px;
						margin:0;

						@include respond-to('pad'){
							font-size: 48px;
							line-height: 58px;
							padding: 40px 0 0 30px;
						}
						@include respond-to('small'){
							font-size: 48px;
							line-height: 58px;
							padding: 40px 0 0 30px;
						}
						@include respond-to('medium'){
							font-size: 48px;
							line-height: 58px;
							padding: 40px 0 0 30px;
						}
						@include respond-to('large'){
							font-size: 48px;
							line-height: 58px;
							padding: 40px 0 0 30px;
						}
						@include respond-to('huge'){
							font-size: 96px;
							line-height: 115px;
							padding: 80px 0 0 70px;
						}
					}

					.line2{
						font-size: 18px;
						line-height: 24px;
						text-align:left;

						@include respond-to('pad'){
							font-size: 18px;
							line-height: 24px;
							margin: 18px 0 0 30px;
						}
						@include respond-to('small'){
							font-size: 18px;
							line-height: 24px;
							margin: 18px 0 0 30px;
						}
						@include respond-to('medium'){
							font-size: 18px;
							line-height: 24px;
							margin: 18px 0 0 30px;
						}
						@include respond-to('large'){
							font-size: 18px;
							line-height: 24px;
							margin: 18px 0 0 30px;
						}
						@include respond-to('huge'){
							font-size: 24px;
							line-height: 36px;
							margin: 24px 0 0 70px;
						}
					}

					.black-button{
						background: #1A1A1A;
						color:#ffffff;
					}
						
					.white-button{
						background: #ffffff;
						color:#1A1A1A;
					}

					.info-link{
						height:36px;
						width:86px;
						border-radius: 2px;
						text-align:center;
						cursor:pointer;

						&:hover{
							opacity:0.85;
						}

						@include respond-to('pad'){
							height:36px;
							width:86px;
							margin: 24px 0 0 30px;
						}
						@include respond-to('small'){
							height:36px;
							width:86px;
							margin: 24px 0 0 30px;
						}
						@include respond-to('medium'){
							height:36px;
							width:86px;
							margin: 24px 0 0 30px;
						}
						@include respond-to('large'){
							height:36px;
							width:86px;
							margin: 24px 0 0 30px;
						}
						@include respond-to('huge'){
							height:48px;
							width:112px;
							margin: 36px 0 0 70px;
						}
					}

					.knowMore{
						font-size:14px;
						line-height:36px;

						@include respond-to('pad'){
							font-size:14px;
							line-height:36px;
						}
						@include respond-to('small'){
							font-size:14px;
							line-height:36px;
						}
						@include respond-to('medium'){
							font-size:14px;
							line-height:36px;
						}
						@include respond-to('large'){
							font-size:14px;
							line-height:36px;
						}
						@include respond-to('huge'){
							font-size:18px;
							line-height:48px;
						}
					}

					.white-ground {
						color:#1A1A1A;
					}
						
					.black-ground {
						color:#ffffff;
					}
				}
			}
		}

		li:not(:first-of-type) {
			position: absolute;
			left: 0;
			top: 0;
		}
	}

	nav {
		display: flex;
		justify-content: center;
		margin: 20px 0 0;

		button {
			flex: 0 0 auto;
			margin: 0 5px;
			cursor: pointer;
			color: #333;
			background: none;
			border: 1px solid;
			letter-spacing: 1px;
			padding: 5px 10px;
		}
	}

	.three-dimansion-slider-btn{
		position:absolute;
		top:50%;
		margin-top:-40px;
		width:60px;
		height:80px;
		cursor: pointer;
	
		&.three-dimansion-slider-prev {
			left: 25%;
			opacity:1;
			background-image:url(../images/prev.png);
			//visibility:hidden;
			
			&:hover{
				opacity:0.5;
			}
		}
		
		&.three-dimansion-slider-next {
			right: 25%;
			opacity:1;
			background-image:url(../images/next.png);
			//visibility:hidden;
			
			&:hover{
				opacity:0.5;
			}
		}
	}
	
	.three-dimansion-slider-ctrl {
        position: absolute;
        left: 50%;
		bottom:10%;
		
		span {
			box-sizing: border-box;
			float: left;
			margin-right: 16px;
			width: 10px;
			height: 10px;
			border: 1px solid #ababab;
			border-radius: 6px;
			background-color: #ababab;
			cursor: pointer;
		}
		
		.active {
			background-color: #ffffff;
			border:1px solid #ababab;
		}
    }
}
